<template>
    <div>
        <van-row>
            <!-- 左边 -->
            <van-col span="6">
                <!-- 侧边导航渲染 -->
                <van-sidebar v-model="active">
                    <van-sidebar-item v-for="item in categoriesApiData" :title="item.cat_name" />
                </van-sidebar>
            </van-col>
            <!-- 右边 -->
            <van-col span="17">
                <!-- 搜索框 -->
                <search></search>
                <!-- 轮播图组件复用 -->
                <swipe :images="images" imgheight="150px" imgwidth="100%"></swipe>
                <!-- 二级内容渲染 -->
                <div v-for="item in categoriesApiData[active]?.children">
                    <h5>{{ item.cat_name }}</h5>
                    <!-- 宫格 -->
                    <router-link :to="{ name: 'goods' ,params:{query:item.cat_name}}">
                        <van-grid>
                            <van-grid-item v-for="item in item.children" :icon="item.cat_icon" :text="item.cat_name" />
                        </van-grid>
                    </router-link>
                </div>
                <!-- :column-num="3" -->
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import { ref } from 'vue';
// 侧边导航默认显示
const active = ref(0);
// 轮播图组件引入
import swipe from '@/components/swipe.vue';
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
];
// 搜索框组件引入
import search from '@/components/search.vue';
// 侧边导航渲染 引入接口
import { categoriesApi } from '@/api/api';
let categoriesApiData = ref([])
categoriesApi().then((res) => {
    console.log(res);
    categoriesApiData.value = res.data.message
})
</script>

<style lang="scss" scoped></style>